<template>
    <div class="step-wrap">
        <vue-step :now-step="active+1" :step-list="list" active-color="#fe8b01"></vue-step>
    </div>
</template>

<script>
    import vueStep from 'vue-step';
    import cookie from 'js-cookie';

    export default {
        components: { vueStep },
        props: ['active'],
        data () {
            return {
                list: []
            }
        },
        computed: {
            siteLangFlag () {
                return cookie.get('site-lang') || 'zh-CN' ;
            }
        },
        mounted () {
            // console.log(this.siteLangFlag)
            this.list = [this.$t('message.qxzcglx'), this.$t('addMsg.txjbxx'), this.$t('addMsg.txxxxx'), this.$t('addMsg.tjcg')]
        }
    }

</script>

<style lang="scss" scoped>
    .step-wrap {
        padding: 15px;
        background: #fff;
        border-radius: 8px;
    }

</style>


<!--<template>-->
<!--  <div class="step">-->
<!--    <van-steps :active="active" active-color="#FE8C01">-->
<!--      <van-step>{{$t('message.qxzcglx')}}</van-step>-->
<!--      <van-step>{{$t('addMsg.txjbxx')}}</van-step>-->
<!--      <van-step>{{$t('addMsg.txxxxx')}}</van-step>-->
<!--      <van-step>{{$t('addMsg.tjcg')}}</van-step>-->
<!--    </van-steps>-->
<!--  </div>-->
<!--</template>-->

<!--<script>-->
<!--export default {-->
<!--  props: {-->
<!--    active: Number-->
<!--  }-->
<!--};-->
<!--</script>-->

<!--<style lang="scss" scoped>-->
<!--.step {-->
<!--  background: #fff;-->
<!--  padding: 6px;-->
<!--  border-radius: 8px;-->
<!--  padding-top: 17px;-->
<!--}-->
<!--</style>-->
